<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧教育平台 - 让学习更简单</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-logo">
                <i class="fas fa-graduation-cap"></i>
                <span>智慧教育</span>
            </div>
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#courses">课程</a></li>
                <li><a href="#teachers">教师</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
            <div class="nav-buttons">
                <button class="btn-login">登录</button>
                <button class="btn-register">注册</button>
            </div>
        </div>
    </nav>

    <!-- 主页横幅 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1>开启您的学习之旅</h1>
            <p>探索丰富的在线课程，与优秀教师互动，提升您的技能和知识</p>
            <div class="hero-buttons">
                <button class="btn-primary">开始学习</button>
                <button class="btn-secondary">浏览课程</button>
            </div>
        </div>
        <div class="hero-image">
            <div class="floating-card">
                <i class="fas fa-book-open"></i>
                <span>500+ 课程</span>
            </div>
            <div class="floating-card">
                <i class="fas fa-users"></i>
                <span>10万+ 学员</span>
            </div>
        </div>
    </section>

    <!-- 特色课程 -->
    <section id="courses" class="courses">
        <div class="container">
            <h2>热门课程</h2>
            <div class="course-grid">
                <div class="course-card">
                    <div class="course-image">
                        <img src="https://via.placeholder.com/300x200/4A90E2/FFFFFF?text=编程基础" alt="编程基础">
                        <div class="course-badge">热门</div>
                    </div>
                    <div class="course-content">
                        <h3>Python编程基础</h3>
                        <p>从零开始学习Python编程，掌握编程思维和基础语法</p>
                        <div class="course-meta">
                            <span><i class="fas fa-clock"></i> 20小时</span>
                            <span><i class="fas fa-user"></i> 张教授</span>
                            <span><i class="fas fa-star"></i> 4.8</span>
                        </div>
                        <div class="course-price">
                            <span class="price">¥299</span>
                            <button class="btn-enroll">立即报名</button>
                        </div>
                    </div>
                </div>

                <div class="course-card">
                    <div class="course-image">
                        <img src="https://via.placeholder.com/300x200/50C878/FFFFFF?text=数据分析" alt="数据分析">
                        <div class="course-badge">新课</div>
                    </div>
                    <div class="course-content">
                        <h3>数据分析与可视化</h3>
                        <p>学习使用Python进行数据分析和可视化，掌握数据洞察能力</p>
                        <div class="course-meta">
                            <span><i class="fas fa-clock"></i> 25小时</span>
                            <span><i class="fas fa-user"></i> 李博士</span>
                            <span><i class="fas fa-star"></i> 4.9</span>
                        </div>
                        <div class="course-price">
                            <span class="price">¥399</span>
                            <button class="btn-enroll">立即报名</button>
                        </div>
                    </div>
                </div>

                <div class="course-card">
                    <div class="course-image">
                        <img src="https://via.placeholder.com/300x200/FF6B6B/FFFFFF?text=人工智能" alt="人工智能">
                        <div class="course-badge">高级</div>
                    </div>
                    <div class="course-content">
                        <h3>人工智能入门</h3>
                        <p>探索AI的奥秘，学习机器学习和深度学习的基础知识</p>
                        <div class="course-meta">
                            <span><i class="fas fa-clock"></i> 30小时</span>
                            <span><i class="fas fa-user"></i> 王教授</span>
                            <span><i class="fas fa-star"></i> 4.7</span>
                        </div>
                        <div class="course-price">
                            <span class="price">¥599</span>
                            <button class="btn-enroll">立即报名</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 教师团队 -->
    <section id="teachers" class="teachers">
        <div class="container">
            <h2>优秀教师团队</h2>
            <div class="teacher-grid">
                <div class="teacher-card">
                    <div class="teacher-avatar">
                        <img src="https://via.placeholder.com/150x150/4A90E2/FFFFFF?text=张教授" alt="张教授">
                    </div>
                    <h3>张教授</h3>
                    <p class="teacher-title">计算机科学教授</p>
                    <p class="teacher-desc">拥有15年编程教学经验，专注于Python和Web开发</p>
                    <div class="teacher-stats">
                        <span>课程: 12</span>
                        <span>学员: 5000+</span>
                    </div>
                </div>

                <div class="teacher-card">
                    <div class="teacher-avatar">
                        <img src="https://via.placeholder.com/150x150/50C878/FFFFFF?text=李博士" alt="李博士">
                    </div>
                    <h3>李博士</h3>
                    <p class="teacher-title">数据科学专家</p>
                    <p class="teacher-desc">前谷歌数据科学家，擅长机器学习和数据分析</p>
                    <div class="teacher-stats">
                        <span>课程: 8</span>
                        <span>学员: 3000+</span>
                    </div>
                </div>

                <div class="teacher-card">
                    <div class="teacher-avatar">
                        <img src="https://via.placeholder.com/150x150/FF6B6B/FFFFFF?text=王教授" alt="王教授">
                    </div>
                    <h3>王教授</h3>
                    <p class="teacher-title">AI研究专家</p>
                    <p class="teacher-desc">清华大学AI实验室主任，发表论文100+篇</p>
                    <div class="teacher-stats">
                        <span>课程: 15</span>
                        <span>学员: 8000+</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 学习统计 -->
    <section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <i class="fas fa-users"></i>
                    <h3>100,000+</h3>
                    <p>注册学员</p>
                </div>
                <div class="stat-item">
                    <i class="fas fa-book"></i>
                    <h3>500+</h3>
                    <p>精品课程</p>
                </div>
                <div class="stat-item">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <h3>50+</h3>
                    <p>专业教师</p>
                </div>
                <div class="stat-item">
                    <i class="fas fa-certificate"></i>
                    <h3>95%</h3>
                    <p>满意度</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="about">
        <div class="container">
            <div class="about-content">
                <div class="about-text">
                    <h2>关于智慧教育</h2>
                    <p>我们致力于为每个人提供高质量的在线教育体验。通过先进的技术和优秀的教师团队，我们帮助学员实现学习目标，提升职业技能。</p>
                    <ul class="about-features">
                        <li><i class="fas fa-check"></i> 灵活的学习时间</li>
                        <li><i class="fas fa-check"></i> 专业的教师团队</li>
                        <li><i class="fas fa-check"></i> 丰富的课程内容</li>
                        <li><i class="fas fa-check"></i> 24/7学习支持</li>
                    </ul>
                </div>
                <div class="about-image">
                    <img src="https://via.placeholder.com/500x400/4A90E2/FFFFFF?text=关于我们" alt="关于我们">
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2>联系我们</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <h3>地址</h3>
                            <p>北京市海淀区中关村大街1号</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <div>
                            <h3>电话</h3>
                            <p>400-123-4567</p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <h3>邮箱</h3>
                            <p>info@smartedu.com</p>
                        </div>
                    </div>
                </div>
                <form class="contact-form">
                    <input type="text" placeholder="您的姓名" required>
                    <input type="email" placeholder="您的邮箱" required>
                    <input type="text" placeholder="主题">
                    <textarea placeholder="您的消息" rows="5" required></textarea>
                    <button type="submit" class="btn-primary">发送消息</button>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>智慧教育</h3>
                    <p>让学习更简单，让知识更普及</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                    </div>
                </div>
                <div class="footer-section">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="#home">首页</a></li>
                        <li><a href="#courses">课程</a></li>
                        <li><a href="#teachers">教师</a></li>
                        <li><a href="#about">关于我们</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>课程分类</h3>
                    <ul>
                        <li><a href="#">编程开发</a></li>
                        <li><a href="#">数据分析</a></li>
                        <li><a href="#">人工智能</a></li>
                        <li><a href="#">设计创意</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>订阅我们</h3>
                    <p>获取最新的课程信息和学习资源</p>
                    <div class="subscribe-form">
                        <input type="email" placeholder="输入您的邮箱">
                        <button type="submit">订阅</button>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 智慧教育平台. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html> 